<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>修改菜单栏</title>
    <link href="/css/style.css" rel="stylesheet" type="text/css" />
    <script src="/js/vue3.js"></script>
    <script src="/js/axios.min.js"></script>
</head>

<body>

    <div class="place">
        <span>位置：</span>
        <ul class="placeul">
            <li><a href="#">权限管理</a></li>
            <li><a href="#">修改菜单栏</a></li>
        </ul>
    </div>

    <div class="formbody" id="box">
        <!-- 工具栏 -->
        <div class="tools">
            <ul class="toolbar">
                <li v-on:click="goback"><span><img src="/images/t04.png" /></span>返回</li>
            </ul>
        </div>
        <form id="uploadForm">
            <div class="formtitle"><span>修改菜单栏</span></div>
            <ul class="forminfo">
                <li><input type="hidden" v-model="id" /></li>
                <li><label>菜单名称</label><input v-model="pername" type="text" class="dfinput" /></li>
                <li><label>perdesc</label><input v-model="perdesc" type="text" class="dfinput" /></li>
                <li><label>路径url</label><input v-model="url" type="text" class="dfinput" /></li>

                <li><label>一级菜单</label>
                    <select class="dfinput" v-model="parentId">
                        <option value="-1">请选择</option>
                        <template v-for="(item,index) in allfirstmenuList" :key="item.id">
                            <option selected="(item.id==parentId)" v-bind:value="item.id">
                                {{ item.pername }}
                            </option>
                        </template>
                    </select>
                </li>
            </ul>
            <input type="button" class="scbtn" @click="updateMenuButton" value="修改">
        </form>
    </div>
</body>

<script>
    var paras = location.search; //search获得地址中的参数，内容为'?itemId=12'
    var temp = paras.split('=');
    var itemId = temp[1];
    var obj = {
        data () {
            return {
                allfirstmenuList: {
                },
                pername: '',
                perdesc: '',
                url: '',
                parentId: '',
                id: ''
            }
        },
        mounted () {
            axios({
                method: 'get',
                url: '/blog/admin/menu/' + itemId,
            }).then(function (result) {
                vm.pername = result.data.data.pername;
                vm.perdesc = result.data.data.perdesc;
                vm.url = result.data.data.url;
                vm.parentId = result.data.data.parentId;
                vm.id = result.data.data.id;
            });
            axios({
                method: 'get',
                url: '/blog/admin/allFirstMenu',
            }).then(function (result) {
                vm.allfirstmenuList = result.data.data;
            });
        },
        methods: {
            updateMenuButton () {
                if (confirm("确定修改信息吗？")) {
                    axios({
                        method: 'put',
                        url: '/blog/admin/menu',
                        data: {
                            id: this.id,
                            pername: this.pername,
                            perdesc: this.perdesc,
                            url: this.url,
                            parentId: this.parentId,
                        }
                    }).then(function (result) {
                        window.alert(result.data.msg);
                        if (result.data.code == 0) {
                            setTimeout(function () {
                                window.location.href = "/admin_menu_manage/menu_list.html";
                            }, 500);
                        }
                    });
                }
            },
            goback () {
                window.history.back();
            }
        }
    }
    var vm = Vue.createApp(obj).mount("#box")
</script>

</html>